<template>
  <div class="animal-home-box flex-col-start">
    <div class="animal-home-header flex-col">
      <SchoolInfoBox :school="school"></SchoolInfoBox>
      <div class="animal-home-header-item">

        <div class="label">校区</div>
        <el-radio-group
            v-for="(campus,cIndex ) in school.campusList"
            v-model="campusId"
            :fill="radioList.config.fillColor" size="small"
            @input="handleCampusChange">
          <el-radio-button :label="campus.campus.id">{{ campus.campus.name }}</el-radio-button>
        </el-radio-group>
      </div>

      <div class="animal-home-header-item">
        <div class="label">区域</div>
        <el-radio-group
            v-for="(area,aIndex ) in areaList"
            v-model="areaId"
            :fill="radioList.config.fillColor"
            size="small" @input="handleAreaChange">
          <el-radio-button :label="area.id">{{ area.name }}</el-radio-button>
        </el-radio-group>
      </div>


    </div>
    <div class="animal-home-body flex-col-start">
      <h2>动物一览</h2>
      <div class="animal-home-content flex-col-start">
        <el-empty v-show="pageConfig.pageInfo.size===0" :image-size="200"></el-empty>
        <AnimalBox :col="6" :list="pageConfig.pageInfo.list">

        </AnimalBox>

      </div>
      <el-pagination
          :page-size="pageConfig.pageInfo.pageSize"
          :total="pageConfig.pageInfo.total"
          background
          layout="prev, pager, next"
          @current-change="handlePageChange"
      ></el-pagination>
    </div>

  </div>
</template>

<script>
import AnimalBox from "@/components/animal/AnimalBox.vue";
import SchoolInfoBox from "@/components/school/SchoolInfoBox.vue";
import MiLabel from "@/components/label/MiLabel.vue";
import schoolApi from "@/api/school/school";
import animalApi from "@/api/animal/AnimalApi";
import YImage from "@/components/image/YImage.vue";

export default {
  name: "AnimalHome",
  components: {YImage, MiLabel, SchoolInfoBox, AnimalBox},
  data() {
    return {
      radioList: {
        config: {
          fillColor: "#0F8686"
        },
      },
      sid: 0,
      school: {},
      campusId: 1,
      areaId: 1,
      areaList: [],
      pageConfig: {
        curr: 1,
        pageInfo: {}
      }
    }
  },
  methods: {
    handlePageChange(page) {
      console.log(page)
    },
    getSchoolInfo() {
      schoolApi.getSimpleSchoolInfoBySchoolId(this.sid).then(resp => {
        if (resp.code === 200) {
          this.school = resp.data
        }
      })
    },
    changeCampus() {
      this.getAreaByCampusId(this.campusId)
    },
    getAreaByCampusId(campusId) {
      schoolApi.getAreaListByCampusId(campusId).then(resp => {
        if (resp.code === 200) {
          this.areaList = resp.data
        }
      })
    },
    getAnimalList() {
      let school = {
        id: this.sid
      }
      let campus = {
        id: this.campusId
      }
      let area = {
        id: this.areaId
      }
      animalApi.getAnimalListBySchoolAndCampusAndArea(school, campus, area, this.pageConfig.curr).then(resp => {
        if (resp.code === 200) {

          this.pageConfig.pageInfo = resp.data
        }
      })
    },
    handleCampusChange() {
      // 重置区域
      this.areaId = 0

      // 请求该校区区域
      this.changeCampus()

      // 请求该校区内动物
      this.getAnimalList()
    },
    handleAreaChange() {
      // 请求该校区，该区域内的动物
      this.getAnimalList()
    }
  },
  mounted() {
    // 路由参数,包含学校sid
    this.sid = this.$route.query.sid
    this.getSchoolInfo()
    // if (this.school.campusList.length > 0) {
    //
    // }
    this.getAnimalList()
  }
}
</script>

<style scoped lang="less">
.animal-home-box {
  background-color: #efefef;

  .animal-home-header {
    margin: 20px 0;
    width: 60%;
    min-height: 200px;
    box-shadow: var(--box-shadow);
    padding: 20px;

    .animal-home-header-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 10px;
      height: 40px;

      .label {
        margin-right: 10px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .animal-home-body {
    width: 100%;
    margin-bottom: 50px;

    .animal-home-content {
      width: 90%;
      min-height: 500px;
    }
  }

}
</style>